import './index.scss'
export default function MyFooter({ list, changeAllStatus }) {
  // 计算【选中】的【总数量】
  // 计算【选中】的【总价钱】
  const selectedGoods = list.filter((item) => item.goods_state)
  const totalCount = selectedGoods.reduce(
    (acc, cur) => acc + cur.goods_count,
    0
  )
  const totalPrice = selectedGoods.reduce(
    (acc, cur) => acc + cur.goods_count * cur.goods_price,
    0
  )
  // #1 确定全选的当前状态
  // #2 点击全选，应该把当前状态取反的结果给每一个单选
  const isSelected = list.every((item) => item.goods_state)
  return (
    <div className='my-footer'>
      <div className='custom-control custom-checkbox'>
        {/* #2 子组件调用父组件传递过来方法的同时并传参 */}
        <input
          type='checkbox'
          className='custom-control-input'
          id='footerCheck'
          checked={isSelected}
          onChange={() => changeAllStatus(!isSelected)}
        />
        <label className='custom-control-label' htmlFor='footerCheck'>
          全选
        </label>
      </div>
      <div>
        <span>合计:</span>
        <span className='price'>¥ {totalPrice.toFixed(2)}</span>
      </div>
      <button type='button' className='footer-btn btn btn-primary'>
        结算 ({totalCount})
      </button>
    </div>
  )
}
